<template>
  <div class="filecenter">
    <el-form :inline="true" :model="query" class="demo-form-inline">
      <el-form-item label="每页展示文件数目">
        <el-select
          v-model="query.pageSize"
          placeholder="每页展示文件数目"
          @change="changesize"
        >
          <el-option label="5" value="5"></el-option>
          <el-option label="10" value="10"></el-option>
          <el-option label="20" value="20"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-table :data="pageBean.list" border style="width: 100%" height="330">
      <el-table-column prop="dname" label="文件名" width="580">
      </el-table-column>
      <el-table-column prop="dsize" label="大小" width="180"> </el-table-column>
      <el-table-column prop="ctime" label="创建日期"> </el-table-column>
      <el-table-column label="操作">
        <!-- 内部数据访问机制 -->
        <template slot-scope="scope">
          <a :href="'http://localhost:8080/ky/download?filePath=' + scope.row.path">
            <i
              class="el-icon-download"
              style="color: red; font-size: 20px; cursor: pointer"
            ></i>
          </a>
          <i class="el-icon-delete" @click="handleDelete(scope.$index , scope.row)"></i>
        </template>
      </el-table-column>
    </el-table>
    <div class="datapage">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="Number(query.pageSize)"
        :total="pageBean.total"
        @current-change="currentchange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { files,deleteFile } from "../api/myReq";
export default {
  name: "fileCenter",
  data() {
    return {
      pageBean: {},
      query: {
        pageSize: 5,
        page: 1,
      },
    };
  },
  methods: {
    changesize() {
      this.getfiles();
    },
    currentchange(val) {
      this.query.page = val;
      this.getfiles();
    },
    getfiles() {
      files(this.query).then((resp) => {
        this.pageBean = resp.data.data[0];
        // console.log(this.pageBean);
      });
    },
    handleDelete(index,row){
      deleteFile(row.id).then((resp)=>{
        this.$message({
          message: resp.data.message,
          duration: 2000,
          type: "success",
        })
      });
      window.location.reload();
    }
  },
  mounted(){
    this.getfiles()
  }
};
</script>

<style scoped>
.el-icon-delete{
  color: red;
  margin: 0 20px ;
}
</style>